<#noparse><#import "/spring.ftl" as spring />
<#import "/tpl/layouts/xyLayout.ftl" as layout>
<@layout.title>...</@layout.title>
<@layout.css><link rel="stylesheet" type="text/css"href="/css/nav.css" /></@layout.css><@layout.content>
<el-row id="mainBox">
    <el-row style="height:60px;">
        <el-col :span="3"  style="line-height:60px;">
            <img width="220" height="60" alt="logo" />
            <span>system name</span>
        </el-col>
        <el-col :span="21" style="text-align:right">
            <span>xxxx,</span><span v-on:click="logout" style="cursor:pointer;padding-right:20px;line-height:60px;">退出</span>
        </el-col>
    </el-row>
    <div id="navbox" class="navbox">
        <el-menu style="overflow-y:auto;" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <template v-for="i in navMenuList">
                <el-submenu v-if="i.children" v-bind:index="i.menuUrl">
                    <template slot="title"><i class="el-icon-menu"></i>{{i.menuName}}</template>
                    <template v-for="j in i.children">
                        <el-submenu v-if="j.children" v-bind:index="j.menuUrl">
                            <template slot="title">{{j.menuName}}</template>
                            <template v-for="k in j.children">
                                <el-submenu v-if="k.children" v-bind:index="k.menuUrl">
                                    <template slot="title">{{k.menuName}}</template>
                                    <el-menu-item v-bind:index="l.menuUrl" v-for="l in k.children" v-on:click="openMenu(l)">{{l.menuName}}</el-menu-item>
                                </el-submenu>
                                <el-menu-item v-bind:index="k.menuUrl" v-else v-on:click="openMenu(k)">{{k.menuName}}</el-menu-item>
                            </template>
                        </el-submenu>
                        <el-menu-item v-bind:index="j.menuUrl" v-else v-on:click="openMenu(j)">{{j.menuName}}</el-menu-item>
                    </template>
                </el-submenu>
                <el-menu-item v-bind:index="i.menuUrl" v-else v-on:click="openMenu(i)"><i class="el-icon-menu"></i>{{i.menuName}}</el-menu-item>
            </template>
        </el-menu>
    </div>
    <div id="tabBox" class="tabBox">
        <el-tabs v-model="currentTab" type="card" closable="true" v-on:tab-remove="removeTab">
            <el-tab-pane v-for="tab in tabList" v-bind:key="tab.url" v-bind:label="tab.name" v-bind:name="tab.name">
                <iframe v-if="tab.type==='url'" frameBorder="0" v-bind:width="tabConfig.iframe.width" v-bind:height="tabConfig.iframe.height" v-bind:src="tab.url"></iframe>
                <span v-if="tab.type!='url'" style="padding-left: 10px;">{{tab.html}}</span>
            </el-tab-pane>
        </el-tabs>
    </div>
</el-row>
</@layout.content>
<@layout.script>
<script>
(function(){
    let _m_height = ($(window).height()-60);
    let _t_width = ($(window).width()-220);
    $('#navbox').height(_m_height+'px');
    $('#tabBox').width(_t_width+'px').height(_m_height+'px');
    var vue = new Vue({
        el: '#mainBox',
        data: {
            tabList:[],
            currentTab:'',
            tabConfig:{
                iframe:{width:_t_width,height:(_m_height-41)}
            },
            navMenuList:[
                {'menuName':'任务管理','menuUrl':'/main/task/manage'},
                {'menuName':'导航1', 'menuUrl':'url-1',
                    'children':[
                        {'menuName':'导航1-1', 'menuUrl':'url-1-1',
                            'children':[
                                {'menuName':'导航1-1-1', 'menuUrl':'url-1-1-1',
                                    'children':[
                                        {'menuName':'导航1-1-1-1', 'menuUrl':'url-1-1-1-1'},
                                        {'menuName':'导航1-1-1-3', 'menuUrl':'url-1-1-1-3'}
                                    ]
                                },
                                {'menuName':'导航1-1-2', 'menuUrl':'url-1-1-2'}
                            ]
                        },
                        {'menuName':'导航1-2', 'menuUrl':'url-1-2'},
                        {'menuName':'导航1-3', 'menuUrl':'url-1-3'},
                        {'menuName':'导航1-4', 'menuUrl':'url-1-4'}
                    ]
                },
                {'menuName':'导航2', 'menuUrl':'url-2',
                    'children':[
                        {'menuName':'导航2-1', 'menuUrl':'url-2-1'},
                        {'menuName':'导航2-2', 'menuUrl':'url-2-2'}
                    ]
                },
                {'menuName':'导航3', 'menuUrl':'url-3'},
                {'menuName':'导航4', 'menuUrl':'url-4'},
                {'menuName':'导航5', 'menuUrl':'url-5'},
                {'menuName':'导航6', 'menuUrl':'url-6'},
                {'menuName':'导航7', 'menuUrl':'url-7'},
                {'menuName':'导航8', 'menuUrl':'url-8'},
                {'menuName':'导航9', 'menuUrl':'url-9'}
            ]
        },
        methods:{
            logout:function(){
                this.$alert('logout');
            },
            openMenu:function(tabObj){
                var isFound=false;
                this.tabList.forEach(_tmp=>{
                    if(_tmp.name===tabObj.menuName &&
                            _tmp.url===tabObj.menuUrl){
                        isFound=true;
                    }
                });
                if(isFound==false){
                    this.tabList.push({'type':'url','name':tabObj.menuName,'url':tabObj.menuUrl});
                }
                this.currentTab=tabObj.menuName;
            },
            removeTab:function(tabName){
                if(this.tabList.length<2){
                    //少于2个tab时,不允许关闭
                }else{
                    var _tabIdx=-1;
                    for(var i=0;i<this.tabList.length;i++){
                        if(this.tabList[i].name===tabName){
                            _tabIdx = i;
                            break;
                        }
                    }
                    if(_tabIdx!=-1){
                        this.tabList.splice(_tabIdx, 1);
                    }
                }
            }
        }
    });
    vue.tabList.push({'name':'欢迎','type':'html','html':'welcome'});
    vue.currentTab='欢迎';
})();
</script> </@layout.script></#noparse>